<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="__CSS__/css/ydui.css">
    <link rel="stylesheet" href="__CSS__/css/demo_1.css">
    <style>
        #header {
            position: fixed;
            top: 0;
            left: 0;
        }
        #J_Address {
            font-size: 16px;
        }

        .down {
            display: inline-block;
            width: 0.6rem;
            height: 0.6rem;
            margin-left: 0.5rem;
        }
        #container {
            height: 90%;
            margin-top: 2.8rem;
        }
        /*点击标记显示信息*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        /*点击标记显示信息*/
    </style>
</head>

<body>
{if $userInitInfo.user_index == 1}
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;您没有查看地图权限！
{else /}
<header class="aui-bar aui-bar-nav underLine" id="header">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-ellipsis-1" id="J_Address" onclick="">选择城市<img src="__IMG__/down.png" class="down"></span>
    </a>
</header>
<div id="container"></div>
{/if}
<!---->
<!---->
</body>
{include file="public/footer" /}
</html>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=3e1efc9bcd502e8d0ded020ee743130c&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="__JS__/js/ydui.citys.js"></script>
<script src="__JS__/js/ydui.js"></script>
<!--<script src="__JS__/js/ydui.flexible.js"></script>-->
<script type="text/javascript">
    /**
     * 省市区街道四级联动
     * @type {*}
     */
    var $target = $('#J_Address');
    $target.citySelect();
    $target.on('click', function (event) {
        event.stopPropagation();
        $target.citySelect('open');
    });
    $target.on('done.ydui.cityselect', function (ret) {
//        console.log(ret)
        $(this).text(ret.country + ' ' + ret.provance + ' ' + ret.city);
        dingwei(ret.provance + ret.city + ret.area,ret.id)
    });
    /**
     * 地图加载和搜索
     * @type {AMap.Map}
     */
    var map = new AMap.Map("container", {
        resizeEnable: true,
//        zoom:11
    });
    function dingwei(address,id) {
        var geocoder;
        if(!geocoder){
            geocoder = new AMap.Geocoder({
//                                                            city: "010", //城市设为北京，默认：“全国”
            });
        }
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                map.setCenter(lnglat);
//                map.setZoom(11);
                ajaxGet(id);
            }else{
//                $('#latlon').val('');
            }
        });
    }

    function makerShops(datas) {
        //输入提示
        if(datas){
            var yy_i = 0;
            var flags = true;
            var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
            for (var i = 0, marker; i < datas.length; i++) {
                if (datas[i]['s_status'] == 1 && yy_i >= 3) { //黄色只显示前三个
                    flags = false;
                } else {
                    if(datas[i]['s_status'] == 1){
                        yy_i++;
                    }
                    var icon = '';
                    if (datas[i]['s_status'] == 1) { //报备中用黄色
                        icon = '__IMG__/address_zi.png';
                    }
                    if (datas[i]['s_status'] == 2) { //正常用红色
                        icon = '__IMG__/address_hong.png';
                    }
                    if (datas[i]['s_status'] >= 3) { //无报备用绿色
                        icon = '__IMG__/address_lan.png';
                    }
                    var marker = new AMap.Marker({
                        icon: icon,
                        position: [datas[i]['s_lon'], datas[i]['s_lat']],
                        map: map
                    });
                    datas[i]['s_name'] = '脖脸皮店铺';
                    marker.content = '<br/><span style="color: #000;font-size: 14px;font-weight: bold;line-height: 30px;">名字：' + datas[i]['s_name'] + '</span>' +
                        '<br/><span style="line-height: 20px;font-size: 14px;">地址：' + datas[i]['s_address'] + '</span>' +
                        '<br/><br/>' +
                        '<div style="color: #00a2d4;padding-left: 5px;font-size: 14px;text-align: center;">' +
                        '<a href="http://api.map.baidu.com/marker?location=' + datas[i]['s_lat'] + ',' + datas[i]['s_lon'] + '&title=' + datas[i]['s_name'] + '&content=' + datas[i]['s_address'] + '&output=html">百度导航&nbsp;&nbsp;&nbsp;&nbsp;</a>' +
                        '<a href="https://uri.amap.com/marker?position=' + datas[i]['s_lon'] + ',' + datas[i]['s_lat'] + '&name=' + datas[i]['s_name'] + '&src=mypage&callnative=1">高德导航</a>' +
                        '</div>';
                    marker.on('click', markerClick);
                    marker.emit('click', {target: marker});
                }
            }
            function markerClick(e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
            }
            map.setFitView();
//        map.clearMap();
        }
    }

    function ajaxGet(id) {
        $.ajax({
            url: '/bo/Index/getShopsById',
            data: 'id='+id,
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.msg){
                    makerShops(returnData.msg)
                }else{
                    map.clearMap();
                }
            },
            error: function () {
                alert('服务器错误，请刷新重试！');
            }
        })
    }
</script>
<script type="text/javascript">
    $('.tab-item').click(function () {
        var id = $(this).attr('data-id');
        $('#type').val(id);
        var keyword = $('.aaa').val();
        window.location.href = '/bo/Index/index?type=' + id + '&keyword=' + keyword;
    });
    function openOneProduct(el) {
        var gid = $(el).attr('data-id');
        location.href = '{:url("bo/Index/goodInfo")}?g_id=' + gid;
    }
    //列表
    function selectOne(el) {
        var tid = $(el).attr('typeid');
        var name = $(el).attr('typename');
        var sid = $('#sid').val();
        location.href = '{:url("home/Index/shopGoodList")}?s_id=' + sid + '&type=' + tid + '&name=' + name;
    }
    function searchIndex() {
        var id = $('#type').val();
        var keyword = $('.aaa').val();
        window.location.href = '/bo/Index/index?type=' + id + '&keyword=' + keyword;
    }
    function bannerGo(type, bid, link, gid) {
        if (type == 1) {
            location.href = '{:url("bo/Index/goodInfo")}?g_id=' + gid;
        } else if (type == 2) {
            location.href = link;
        } else {
            location.href = '{:url("bo/Index/bannerInfo")}?bid=' + bid;
        }
    }
</script>

